import popEvent from './event.js'

// let temp = document.createElement('template');

// temp.innerHTML = ``


export default class myCom extends HTMLElement {
  constructor() {
    super();
    // console.log(this.attributes);
    let attr = this.attributes;
    this._data = {
      title: attr.title ? attr.title.value : '默认的标题',
      content: attr.content ? attr.content.value : '默认的内容',
    }
    this.render();
    this.bindEvent();
  }

  render() {
    this.btn = document.createElement('button');
    this.btn.innerHTML = '点击显示弹窗';
    this.setAttribute('data-open','true');

    this.obj = document.createElement('div');
    this.obj.innerHTML = `
    <div class="mask" data-test='111'>
      <div class="mask-title">
        <div>${ this._data.title }</div>
        <div data-cancel='123' data-hide='true'>取消</div>
        <div data-hide='true'>关闭</div>
      </div>
      <div class="mask-body">
        ${ this._data.content }
      </div>
    </div>
    `;
    this.append(this.obj,this.btn);
  }

  bindEvent() {
    this.event = new popEvent({
      obj: this,
      popup:false
    });
  }
  hide() {
    console.log('点击了关闭按钮');
    this.obj.style.display = 'none';
  }
  cancel(){
    console.log('点击了取消按钮');
  }
  test(){
    console.log('触发了弹窗的点击事件');
  }
  open(){
    this.obj.style.display = 'block';
  }
}

window.customElements.define('my-com', myCom);


let style = document.createElement('style');
document.body.appendChild(style);
style.innerText = `
html,body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.mask{
  width: 400px;
  margin: auto;
  border: 1px solid red;
}
.mask-title{
  height: 50px;
  background: rgb(233, 20, 49);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
  color: white;
}
.mask-body{
  height: 200px;
  padding: 10px 20px;
}
`